<template>
  <!-- 商品 -->
  <div class="commodity-wrapper">
    <div class="commodity-wrapper-padding"></div>
    <!-- 轮播图 -->
    <info-goods-swipe v-if="type == 1"></info-goods-swipe>
    <!-- <div v-if="video && type == 2" class="goodsdetail-video">
      <img class="course-live" :src="video.video_thumb" @click="tolink" />
      <img class="course-play" src="../../../../assets/image/home/icon-play.png" @click="tolink" />
    </div>-->
    <!-- <div class="goodsdetail-video" id="video" v-show="video && type == 2"></div> -->
    <video
      ref="video"
      style="background-color:#000"
      v-show="video && type == 2"
      class="goodsdetail-video"
      id="video"
      loop
      :src="video.video_url"
      :poster="video.video_thumb"
      autoplay="autoplay"
      controls="controls"
      webkit-playsinline="true"
      x5-playsinline="true"
      x-webkit-airplay="true"
      playsinline="true"
    ></video>
    <!-- <div v-if="video" class="flex-switch">
      <div class="flex-switch-list" :class="{ active: type == 1 }" @click="switchtoggle(1)">图片</div>
      <div v-if="this.video.video_url" class="flex-switch-list" :class="{ active: type == 2 }" @click="switchtoggle(2)">视频</div>
    </div>-->
    <div class="videoImg">
      <div
        v-if="this.video.video_url"
        class="flex-switch-list"
        :class="{ active: type == 2 }"
        @click="switchtoggle(2)"
      >视频</div>
      <div class="flex-switch-list" :class="{ active: type == 1 }" @click="switchtoggle(1)">图片</div>
    </div>
    <!-- 商品信息 -->
    <info-item></info-item>

    <!-- 促销商品的活动结束时间 -->
    <info-promos-time></info-promos-time>
    <!-- 促销信息 -->
    <info-promotions></info-promotions>
    <!-- 购买 -->
    <info-buy></info-buy>
    <!-- 联系客服-->
    <!-- <info-contact></info-contact> -->
    <!-- 评论 -->
    <!-- <info-goods-review></info-goods-review> -->
    <!-- 拼团 -->
    <info-like></info-like>

    <!-- 店铺信息 -->
    <!-- <div class="goods-detail-store">
      <div>
        <div class="store-name">
          <img class="logo" :src="storeInfo.store_avatar" />
          {{ storeInfo.store_name }}
          <span
            class="icon-mall"
            v-if="storeInfo.is_platform_store"
          >自营</span>
        </div>
        <div class="store-rate">
          <span class="equal">
            描述相符
            <em>{{ storeInfo.store_credit.store_servicecredit.credit }}</em>
            <i>分</i>
          </span>
          <span class="equal">
            服务态度
            <em>{{ storeInfo.store_credit.store_desccredit.credit }}</em>
            <i>分</i>
          </span>
          <span class="equal">
            发货速度
            <em>{{ storeInfo.store_credit.store_deliverycredit.credit }}</em>
            <i>分</i>
          </span>
        </div>
      </div>
    </div> -->

    <!-- 店铺信息修改的 -->
    <div class="goods-detail-store">
      <div>
        <div class="store-name">
          <img class="logo" :src="storeInfo.store_avatar" alt />
          <div class="store-data">
            <div class="comprehensive">
              <h3>{{ storeInfo.store_name }}</h3>
              <div>
                综合体验
                <img
                  v-for="item in compStore"
                  :key="item"
                  src="../../../../assets/image/xx.png"
                  alt
                />
              </div>
            </div>
            <div>
              <button class="btn-whole" @click="goStore(1)">全部宝贝</button>
              <button class="btn-stroll" @click="goStore(2)">进店逛逛</button>
            </div>
          </div>
        </div>
        <div class="store-rate">
          <span class="equal">
            宝贝描述
            <em>{{ storeInfo.store_credit.store_servicecredit.credit }}</em>
            <i>分</i>
          </span>
          <span class="equal">
            卖家服务
            <em>{{ storeInfo.store_credit.store_desccredit.credit }}</em>
            <i>分</i>
          </span>
          <span class="equal">
            物流服务
            <em>{{ storeInfo.store_credit.store_deliverycredit.credit }}</em>
            <i>分</i>
          </span>
        </div>
      </div>
    </div>
    <!-- {{ storeInfo.store_name }}
    <span class="icon-mall" v-if="storeInfo.is_platform_store">自营</span>-->

    <!-- 商品搭配 -->
    <accessory-item></accessory-item>
    <!-- 推荐商品  -->
    <!-- <recommend-item></recommend-item> -->
    <div style="height:0.25rem; background-color: #F0F2F5"></div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import InfoGoodsSwipe from "./InfoGoodsSwipe";
import InfoItem from "./InfoItem";
import InfoPromotions from "./InfoPromotions";
import InfoPromosTime from "./InfoPromosTime";
import InfoBuy from "./InfoBuy";
import InfoContact from "./InfoContact";
import InfoLike from "./InfoLike";
import InfoGoodsReview from "./InfoGoodsReview";
import RecommendItem from "./RecommendItem";
import AccessoryItem from "./AccessoryItem";

export default {
  data() {
    return {
      video: "", // 视频
      type: 1, // 切换图片或视频，1：图片，2：视频
      player: null,
      sotre_id: this.$route.query.id ? this.$route.query.id : "",
      comp_store: "",
    };
  },

  created() {
    console.log(this.storeInfo);
  },

  components: {
    InfoGoodsSwipe,
    InfoItem,
    InfoPromotions,
    InfoPromosTime,
    InfoBuy,
    // InfoContact,
    InfoLike,
    InfoGoodsReview,
    RecommendItem,
    AccessoryItem,
  },

  computed: {
    ...mapState({
      storeInfo: (state) => state.goodsdetail.storeInfo,
      detailInfo: (state) => state.goodsdetail.detailInfo,
    }),
    compStore() {
      var result = this.storeInfo.comp_store.toString().indexOf(".");
      if (result >= 0) {
        this.storeInfo.comp_store = parseInt(this.storeInfo.comp_store);
      } else {
      }
      console.log(this.storeInfo.comp_store);
      return this.storeInfo.comp_store;
    },
  },

  mounted() {
    if (this.detailInfo.goods_video) {
      this.video = JSON.parse(this.detailInfo.goods_video);
      if (this.video.video_url) {
        this.type = 2;
        this.switchtoggle(2);
      } else {
        this.type = 1;
      }
    } else {
      this.type = 1;
    }
  },

  methods: {
    goStore(type) {
      if (type == 1) {
        this.$router.push({
          name: "HomeStoreGoodslist",
          query: { id: this.storeInfo.store_id },
        });
      } else {
        this.$router.push({
          name: "HomeStoredetail",
          query: { id: this.storeInfo.store_id },
        });
      }
    },
    // 播放
    tolink() {
      window.location.href = this.video.video_url;
    },
    showPreview(index) {
      this.$parent.showPreview(index);
    },
    // 切换图片视屏
    switchtoggle(type) {
      this.type = type;
      if (type == 2) {
        this.$refs.video.play();
        // if (!this.player) {
        //   var videoObject = {
        //     container: '#video',
        //     variable: 'player',
        //     autoplay: true,
        //     video: this.video.video_url,
        //     loop: true,
        //     poster: this.video.video_thumb,
        //     mobileCkControls: true
        //   }
        //   this.player = new ckplayer(videoObject)
        // } else {
        //   this.player.videoPlay()
        // }
      } else {
        this.$refs.video.pause();
        //   pause
        // this.player.videoPause()
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.commodity-wrapper-padding {
  margin-top: 2.1rem;
}
.commodity-wrapper {
  height: 100%;
  // margin-top: 2.1rem;
}
.goods-detail-store {
  display: block;
  position: relative;
  z-index: 1;
  padding: 0 0.5rem;
  background: #fff;
  border-top: 0.5rem solid #eee;
}
.goods-detail-store .store-name {
  display: flex;
  min-height: 0.9rem;
  padding: 0.5rem 0 0.25rem 0;
  font-size: 0.7rem;
  line-height: 0.9rem;
  color: #333;
}
.goods-detail-store .btn-whole {
  padding: 0.15rem 0.42rem;
  border: 1px #3c7c45 solid;
  border-radius: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.45rem;
  color: #101010;
  text-align: center;
  outline: none;
}
.goods-detail-store .btn-stroll {
  padding: 0.15rem 0.42rem;
  margin-left: 0.25rem;
  background-color: #3c7c45;
  border-radius: 0.5rem;
  font-size: 0.45rem;
  color: #ffffff;
  text-align: center;
  border: none;
  outline: none;
}
.goods-detail-store .store-name .logo {
  width: 3rem;
  height: 3rem;
  margin-right: 0.5rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
}
.goods-detail-store .store-name .store-data {
  width: 14rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.goods-detail-store .store-name .store-data h3 {
  color: #101010;
  font-size: 0.6rem;
  margin: 0 0 0.85rem 0;
}
.goods-detail-store .store-data .comprehensive {
  width: 6rem;
  flex-shrink: 0;
  border-radius: 0.37rem;
  color: #ffffff;
  font-size: 0.45rem;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  margin-right: 0.75rem;
}
.goods-detail-store .store-data .comprehensive div {
  background: rgba(16, 16, 16, 0.1);
  border-radius: 0.37rem;
  padding: 0 0.28rem;
}
.goods-detail-store .store-name .store-data div img {
  width: 0.45rem;
  margin-right: 0.12rem;
}
.goods-detail-store .store-name .icon-store {
  display: inline-block;
  width: 0.8rem;
  height: 0.9rem;
  vertical-align: top;
  margin-right: 0.2rem;
}
.goods-detail-store .store-name .icon-store:before {
  content: "\e7dc";
}
.goods-detail-store .store-name .icon-mall {
  color: #f23030;
  font-size: 0.55rem;
  margin-left: 0.5rem;
}
.goods-detail-store .store-rate {
  height: 0.7rem;
  padding: 0.4rem 0 0.5rem 0;
  //   border-top: solid 0.05rem #eee;
  font-size: 0;
}
.goods-detail-store .store-rate span {
  display: inline-block;
  width: 33.33%;
  // height: 0.7rem;
  font-size: 0.5rem;
  line-height: 0.7rem;
  color: #b5b5b5;
  overflow: hidden;
}
.goods-detail-store .store-rate span em {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.5rem;
  font-weight: 600;
  margin-left: 0.35rem;
}
.goods-detail-store .store-rate span i {
  display: inline-block;
  vertical-align: middle;
  width: 0.7rem;
  height: 0.7rem;
  font-size: 0.45rem;
  line-height: 0.7rem;
  font-style: normal;
  text-align: center;
  border-radius: 0.1rem;
  margin-left: 0.2rem;
}
.goods-detail-store .store-rate span.high em,
.goods-detail-store .store-rate span.equal em {
  //   color: #f23030;
}
.goods-detail-store .store-rate span.high i,
.goods-detail-store .store-rate span.equal i {
  color: #fff;
  background-color: #f23030;
}
.goods-detail-store .store-rate span.low em {
  color: #48cfae;
}
.goods-detail-store .store-rate span.low i {
  color: #fff;
  background-color: #48cfae;
}

.goodsdetail-video {
  position: relative;
  width: 100%;
  height: 100vw !important;
  text-align: center;
  // margin-top: 2.1rem;
  .course-live {
    height: 100%;
    width: auto;
  }
  .course-play {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 16vw;
    height: 16vw;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 100px;
  }
}

.flex-switch {
  background: white;
  display: flex;
  flex-direction: row;
  padding: 5px 30vw 0 30vw;
  justify-content: space-around;
  margin: auto;
  .flex-switch-list {
    font-size: 0.6rem;
    border-radius: 100px;
    padding: 3px 10px;
    border: 1px solid #ccc;
  }
  .active {
    color: white;
    background: $primaryColor;
    border: none;
  }
}

.videoImg {
  background: white;
  display: flex;
  flex-direction: row;
  padding: 5px 30vw 0 30vw;
  justify-content: space-around;
  margin: auto;
  .flex-switch-list {
    font-size: 0.6rem;
    border-radius: 100px;
    padding: 3px 10px;
    border: 1px solid #ccc;
  }
  .active {
    color: white;
    background: $primaryColor;
    border: none;
  }
}
</style>
